<template>
    <div class="container">
        <!-- title -->
        <div class="title">
            <img :src="'./static/images/login.png'" alt="">
        </div>
        <form class="formLogin">
            <el-input v-model="phone" placeholder="手机号" clearable></el-input>
            <el-input v-model="code" placeholder="验证码" show-password clearable></el-input>
            <p class="rule">新用户登录即自动注册，并表示已同意<a>《用户服务协议》</a></p>
            <el-button type="success" class="tolog" @click="login">登录</el-button>
            <a class="about">关于我们</a>
        </form>
    </div>
</template>

<script>
import mui from '../../assets/mui/dist/js/mui.min.js'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            phone: '',
            code: '',
            userList: [{
                id: 1,
                name: '小饕餮',
                phone: 'root',
                code: 'root'
            }]
        }
    },
    methods: {
        login() {
            if (this.phone.trim() == '') return mui.alert('请输入手机号')
            if (this.code.trim() == '') return mui.alert('请输入验证码')
            this.userList.some(item => {
                if (item.phone == this.phone && item.code == this.code) {
                    Toast({
                        message: '登陆成功',
                        position: 'top',
                        duration: 1000
                    });
                    // localStorage.setItem('status',1)
                    this.$store.state.status = 1;
                    this.$store.state.user = {
                        name: this.userList[0].name,
                        phone: this.userList[0].phone,
                    }
                    this.$router.push({path: '/address'})
                } else {
                    mui.alert('请输入正确的手机号/验证码')
                }
            })
        }
    }
}
</script>

<style scoped>
    .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        padding-top: 40px;
    }
    /* title */
    .title img {
        display: block;
        margin: 0 auto;
        width: 130px;
        height: 56px;
    }
    /* form */
    .formLogin {
        width: 300px;
        margin: 16px auto;
    }
    /* p */
    p {
        margin-top: 12px;
    }
    /* btn */
    .tolog {
        width: 100%;
        height: 42px;
        margin-top: 15px;
        font-size: 16px;
    }
    .about {
        display: block;
        margin: 20px auto;
        text-align: center;
        font-size: 12px;
        color: #999;
    }
</style>
